<template>
  <div class="registerPage">
    <div class="closeBtn">
      <span class="iconfont iconicon-test" style="color:#fff"></span>
    </div>
    <div class="logoPart">
      <span class="iconfont iconnew"></span>
    </div>
    <!-- <div class="inputDom">
      <input type="text" placeholder="请输入手机号" />
    </div>
    <div class="inputDom">
      <input type="text" placeholder="请输入昵称" />
    </div>
    <div class="inputDom">
      <input type="password" placeholder="请输入密码" />
    </div>-->

    <AuthInput
      :msg="{holder:'请输入电话号码',type:'text'}"
      :rule="/^\d{5,11}$/"
      err_msg="请输入正确的号码"
      @valChange="setUsername"
    ></AuthInput>
    <AuthInput
      :msg="{holder:'请输入昵称',type:'text'}"
      :rule="/^\w{3,6}$/"
      err_msg="昵称必须是三位字符"
      @valChange="setNickname"
    ></AuthInput>
    <AuthInput
      :msg="{holder:'请输入密码',type:'password'}"
      :rule="/^\w{3,8}$/"
      err_msg="密码不合法"
      @valChange="setPassword"
    ></AuthInput>
    <!-- <div class="btn">注册</div> -->
    <AuthBtn msg="同意条款现在注册" @submit="register"></AuthBtn>
    <div class="tiaokuan">
      -------------------查看
      <a style="color:skyblue">《八国条约》</a> ------------
    </div>
  </div>
</template>

<script>
import AuthInput from "../components/AuthInput";
import AuthBtn from "../components/AuthBtn";
export default {
  data() {
    return {
      username: "",
      nickname: "",
      password: "",
    };
  },
  components: { AuthInput, AuthBtn },
  methods: {
    register() {
      console.log("父组件得到通知, 按钮被点击了, 后面应该发送请求");
      console.log("用户名", this.username);
      console.log("昵称", this.nickname);
      console.log("密码", this.password);
      //发送请求前先 校验数据是否正确
      if (!this.username || !this.nickname || !this.password) {
        this.$toast.fail("请输入完整信息");
        return;
      }
      //发送ajax请求
      this.$axios({
        url: "/register",
        method: "post",
        data: {
          username: this.username,
          nickname: this.nickname,
          password: this.password,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.message == "注册成功") {
            this.$toast(res.data.message);
          }
        })
        .catch((err) => {
          this.$toast.fail("系统错误");
        });
    },
    setUsername(newName) {
      this.username = newName;
    },
    setNickname(newNickname) {
      this.nickname = newNickname;
    },
    setPassword(newPassword) {
      this.password = newPassword;
    },
  },
};
</script>

<style lang="less" scoped>
.registerPage {
  padding: 24/360 * 100vw;
  height: 100%;
  background: url("../assets/back.jpeg") no-repeat;
  background-size: 100% 100%;
  .iconicon-test {
    font-size: 27/360 * 100vw;
  }
  .logoPart {
    text-align: center;
    .iconnew {
      font-size: 126/360 * 100vw;
      color: red;
    }
  }
  .tiaokuan {
    color: #fff;
    margin-top: 30px;
  }
}
</style>